<template>
  <div>
    <PanDog
      v-for="(item, index) in list"
      :key="index"
      :url="item.dogImgUrl"
      :title="item.dogName"
      @LikeDog="likeFn"
      :index="index"
    />
    <span
      >你喜欢的狗如下：
      <ul>
        <li v-for="(item, index) in ulike" :key="index">{{ item }}</li>
      </ul>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'https://pic1.zhimg.com/80/v2-7ba4342e6fedb9c5f3726eb0888867da_1440w.jpg?source=1940ef5c',
          dogName: '阿拉斯加',
        },
        {
          dogImgUrl:
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1001.pocoimg.cn%2Fimage%2Fpoco%2Fworks%2F70%2F2008%2F1007%2F23%2F44108456200810072332012375691105195_005_44108456.jpg&refer=http%3A%2F%2Fimg1001.pocoimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665223055&t=0b753172ee23a805ae639253d0424031',
          dogName: '萨摩耶',
        },
      ],
      ulike: [],
    }
  },
  methods: {
    likeFn(i, $event) {
      let r = Math.floor(Math.random() * 255)
      let g = Math.floor(Math.random() * 255)
      let b = Math.floor(Math.random() * 255)
      let colorname = 'rgba(' + r + ',' + g + ',' + b + ',0.8)'
      event.target.style.backgroundColor = colorname
      if (i >= 0) {
        this.ulike.push(this.list[i].dogName)
      }
    },
  },
}
</script>

<style></style>
